import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView, Text } from '@tarojs/components'
import NavigationBar from '../../../components/navigationBar/index';

import './index.scss'
import { goodsList, addShoppingCart, goodsDetail } from '../../../services/goods';
import { fullImgUrl } from '../../../utils/utils';
import iconshop from '../../../static/public/icon-close.png';
import { getUserInfo, } from '../../../services/user';
import iconCart from './img/icon_cart.png';
import zhebottom from './img/zhebottom.png';
import add from './img/add.png';
import del from './img/del.png';

import addgood from './img/addgood.png';
import iconcode from './img/icon_code.png';
import vipbg from './img/bg.png';
import icon_close from './img/icon_close.png';
export default class Index extends Component {

  config = {
    navigationBarTitleText: '购物',
    type: this.$router.params.id,
  }

  state = {
    list: [],
    detailist: {},
    isAgreement: false,
    balance: Taro.getStorageSync('userInfo').balance,
    num: 1,
    goods_desc: '',
    goods_id: '',
    goods_num: 1,
    statusS: 0,
    goods_name: '',
    Discount: null,
    isMember: null,
    setting: Taro.getStorageSync('setting'),
    activePic: true,
    member_level: Taro.getStorageSync('userInfo').member_level,
    pageObj: {
      page: 1,
      page_number: 10,
      is_member: Taro.getStorageSync('userInfo').member_level == 0 ? 0 : 1
    },
    active: '',
    isMore: false,
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    lists: [
      {
        value: '美国',
        text: '美国',
        checked: false
      },
      {
        value: '中国',
        text: '中国',
        checked: true
      },
    ]
  };
  componentDidShow() {
    // getUserInfo({
    //   id: Taro.getStorageSync('userInfo').id + '',
    // }).then(res => {
    //   Taro.setStorageSync('userInfo', res);

    // });
    goodsDetail({
      goods_id: this.$router.params.goods_id
    }).then(res => {
      res.has_sku.forEach((item, index) => {
        item.fish_cover = fullImgUrl(item.fish_cover)
        item.cover = fullImgUrl(item.cover)
        item.card_cover = fullImgUrl(item.card_cover)

      })
      this.setState({
        list: res
      })
    })
  }
  componentDidMount() {
  }

  goGoodsDetail(id) {
    Taro.navigateTo({
      url: `/pages/goods-detail/index?id=${id}`
    })
  }
  closesku() {
    this.setState({
      isAgreement: false
    })
  }
  addCount(e) {
    let num = this.state.goods_num
    num = num + 1
    this.setState({
      goods_num: num
    })
  }
  convert(list) {
    addShoppingCart({
      sku_id: list.sku_id,
      num: this.state.goods_num,
      goods_type: this.state.statusS,
      goods_id: list.goods_id,
    }).then(res => {
      Taro.showToast({
        title: '添加购物车成功',
        icon: 'none',
      });
    });
    this.closesku()
  }
  tosettiement(list) {
    if (list.store_num == 0) {
      Taro.showToast({
        title: '库存不足1件',
        icon: 'none',
      });
    } else {
      var obj = {
        sku_id: list.sku_id,
        num: this.state.goods_num,
        goods_type: this.state.statusS,
      }
      Taro.navigateTo({
        url: `/subPacKagebWork/pages/settlement-centers/index?sku_id=${list.sku_id}&num=${this.state.goods_num}&goods_type=${this.state.statusS}`

      })
    }
  }
  minusCount(e) {
    let num = this.state.goods_num
    if (num <= 1) {
      return false
    }
    num = num - 1
    this.setState({
      goods_num: num
    })
  }
  activeclick(num) {
    this.setState({
      statusS: num
    })
  }
  goshopcard() {
    console.log(1)
    Taro.navigateTo({
      url: `/subPacKagebWork/pages/cart/index`
    })
  }
  goback() {
    Taro.navigateBack();

  }
  closepic() {
    this.setState({
      activePic: false,
    })
  }
  showsku(goods, isMember, discount) {
    if (this.state.list.is_member != 0) {
      if (Taro.getStorageSync('userInfo').member_level != 0) {
        this.setState({
          isAgreement: true,
        })
        this.state.detailist = goods
        this.state.goods_id = goods.goods_id
        this.state.goods_num = 1
        this.state.Discount = discount
        this.state.isMember = isMember
      } else {
        Taro.showToast({
          title: '您还不是会员哦',
          icon: 'none',
        });
      }
    } else {
      this.setState({
        isAgreement: true,
      })
      this.state.detailist = goods

    }

  }

  render() {
    const { list, isAgreement, balance, detailist, statusS, member_level, isMember, Discount, setting, activePic } = this.state;
    return (
      <View className='goods-list' style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text={list.goods_name} type="activity" />
        {setting.is_member_goods_active_pic == 1 && list.is_member == 1 && activePic == true ? (
          <View className="active-pic" >
            <Image onClick={this.closepic} className="colse-card" src={iconshop} />

            <Image mode="widthFix" className="active-img" src={fullImgUrl(setting.member_goods_active_pic)} />

          </View>) : (
            ''
          )}
        {this.state.list.has_sku.length > 0 ? (

          <View className="vip-goods-list" >
            <View className="fixed-shop" onClick={this.goshopcard}>
              <Image className="fixed-shop-image" src={iconCart} />
            </View>
            {
              list.has_sku.map(goods => {
                return <View style={`background-image: url(${goods.cover})`} className="goods-list-item" key={goods.goods_id} onClick={() => { this.showsku(goods, list.is_member, list.discount) }}>
                  <Image className="zhebottom" src={zhebottom} />
                  <View className="goods-info">
                    <View className="goods-desc">{goods.attr_str}</View>
                    <View className="goods-desc">{list.goods_name}</View>
                  </View>
                  <View className="goods-bottom-p">
                    {list.is_member == 1 ? (

                      <Text className="goods-price1">
                        ￥{goods.price}
                      </Text>) : (
                        <Text className="goods-price2">
                          ￥{goods.price}
                        </Text>
                      )}

                    {list.is_member == 1 ? (
                      <View style="display:flex">
                        <View className="vip-price">
                          <View className="vip-price1">会员价 </View>
                          {member_level == 1 ? (

                            <View className="vip-price2"> ￥{(goods.price * list.discount / 100 - goods.offset_price).toFixed(2)}</View>
                          ) : (
                              ''
                            )}
                          {member_level == 2 || member_level == 0 ? (

                            <View className="vip-price2"> ￥{(goods.price * list.discount / 100 - goods.two_offset_price).toFixed(2)}</View>
                          ) : (
                              ''
                            )}
                        </View>
                        {/* <Image className="vip-Discount" src={iconcode} />
                        {member_level == 1 ? (

                          <Text className="vip-price3">
                            可再抵扣￥{goods.offset_price}
                          </Text>) : (
                            ''
                          )}
                        {member_level == 2 || member_level == 0 ? (

                          <Text className="vip-price3">
                            可再抵扣￥{goods.two_offset_price}
                          </Text>) : (
                            ''
                          )} */}
                      </View>
                    ) : (
                        ''
                      )}

                  </View>

                  <Image onClick={() => { this.showsku(goods, list.is_member, list.discount) }} className="vip-add" src={addgood} />

                </View>
              })
            }
            {isAgreement == true && (
              <View class="agreement-text">
                <View class="btn-box">
                  <Image onClick={this.closesku} className="colse-card" src={icon_close} />

                  <View className="goods-top">
                    {statusS === 0 ? (

                      <Image className="goods-image" src={detailist.fish_cover} />
                    ) : (
                        <Image className="goods-image" src={detailist.card_cover} />

                      )}
                    <View className="goods-top-child">
                      <Text className="good-top-tittle1">
                        {detailist.attr_str}·{list.goods_name}
                      </Text>
                      <Text className="good-top-tittle4">
                        选择大黄鱼:
                        </Text>
                      <Text className="good-top-tittle5">
                        我们将为您即时捕捞，
                        </Text>
                      <Text className="good-top-tittle5">
                        快递鲜品到家。
                        </Text>
                      <Text className="good-top-tittle4">
                        选择提货卡:
                        </Text>
                      <Text className="good-top-tittle5">
                        我们将为您配送卡券，
                        </Text>
                      <Text className="good-top-tittle5">
                        可即时兑换鱼。
                        </Text>
                    </View>

                  </View>
                  <View className="goods-line"></View>
                  <View className="goods-body1">
                    {isMember == 1 ? (

                      <Text className="goods-price1">
                        原价 ￥{detailist.price}
                      </Text>) : (
                        <Text className="goods-price2">
                          价格  ￥{detailist.price}
                        </Text>
                      )}
                    {isMember == 1 ? (
                      <View style="display:flex;justify-content: space-between;">
                        {member_level == 1 ? (

                          <View className="vip-price2">会员价 ￥{(detailist.price * Discount / 100 - detailist.offset_price).toFixed(2)}</View>
                        ) : (
                            ''
                          )}
                        {member_level == 2 || member_level == 0 ? (

                          <View className="vip-price2">会员价 ￥{(detailist.price * Discount / 100 - detailist.two_offset_price).toFixed(2)}</View>
                        ) : (
                            ''
                          )}
                        {member_level == 1 ? (

                          <Text className="vip-price3">
                            已抵扣￥{detailist.offset_price}
                          </Text>) : (
                            ''
                          )}
                        {member_level == 2 || member_level == 0 ? (

                          <Text className="vip-price3">
                            已抵扣￥{detailist.two_offset_price}
                          </Text>) : (
                            ''
                          )}
                      </View>
                    ) : (
                        ''
                      )}
                  </View>
                  <View className="goods-nums">
                    {detailist.store_num <= 99 ? (
                      <View className="number">库存{detailist.store_num}件</View>

                    ) : (
                        <View className="number">库存99+件</View>

                      )}
                  </View>
                  <View className="goods-body">
                    <View className="goods-type">商品类型</View>
                    <View className="active-dad">

                      <View onClick={() => this.activeclick(0)} className={statusS == 0 ? 'active' : 'active-child'}>大黄鱼</View>
                      {this.$router.params.goods_id == 14 ? 
                        ('')
                      : (<View
                        onClick={() => this.activeclick(1)}
                        style="margin-left:20px" className={statusS == 1 ? 'active' : 'active-child'}>提货卡</View>)}
                    </View>

                  </View>
                  <View className="goods-footer">
                    <View className="goods-num">商品数量</View>

                    <View className="cart-count-box">
                      <Image className="cart-count-add" onClick={this.addCount} src={add}></Image>
                      <Text className="cart-count-num">{goods_num}</Text>
                      <Image className="cart-count-down" onClick={this.minusCount} src={del}></Image>
                    </View>
                  </View>
                  <View className="goods-footer-btn">

                    <View
                      className='submit-btn'
                      onClick={() =>
                        this.tosettiement(detailist)
                      }>
                      立即购买
        </View>
                    <View
                      className='submit-btn1'
                      onClick={() =>
                        this.convert(detailist)
                      }>
                      添加到购物车
        </View>
                  </View>
                </View>
              </View>
            )}
          </View>

        ) : (
            <View>
              <View className="cart-no-data">商品是空的哦</View>
              <View className="cart-no-data1" onClick={() =>
                this.goback()
              }>去逛逛</View>
            </View>
          )}
      </View>
    )
  }
}

